<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/sign.css">
    <script src="../static/js/flexible.debug.js"></script>
    <script src="../static/js/flexible_css.debug.js"></script>
    <!--<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>-->
    <title>签到</title>
</head>
<body>
    <header>
        <h1><span class="left"></span>签到
        <span class="right"><span class="id_1">ID:</span><span class="id">123456789</span></span>
        </h1>
    </header>
    <section class="sec_1">
        <div class="div_1">激活剩余天数:<span class="remain">12天</span></div>
        <div class="div_2">激活到期日:<span class="last">2017-03-21&nbsp;21:21</span></div>
        <div class="div_3">
            <p>温馨提示:处于未激活状态，签到不可铜元转金元</p>
        </div>
        <a href="">去激活</a>
    </section>
    <section class="sec_2">
        <button type="button" class="btn_1 active">签到</button>
    </section>
    <div id="my_date">
    </div>
    <script>
        function calendar(e, f){
            if (e == 'now') e = GetDateStr(0);
            var now_date = e;
            var week_no = new Date(now_date).getDay();
            var date_size = getCountDays(now_date);
            var my_date = document.getElementById(f);


            my_date.innerHTML = '<table border="0"><thead><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>';
            var tbody = my_date.getElementsByTagName('tbody')[0];
            var td = tbody.getElementsByTagName('td');
            var pre_date = now_date.split('/');
            pre_date[1] = Number(pre_date[1]) - 1;
            if (pre_date[1] < 1) {
                pre_date[0] = Number(pre_date[0]) - 1;
                pre_date[1] = 12;
            }
            if (pre_date[1] < 10) {
                pre_date[1] = '0' + pre_date[1]
            }
            pre_date = pre_date[0] + '/' + pre_date[1] + '/' + pre_date[2];
            var pre_week_no = new Date(pre_date).getDay();
            var pre_date_size = getCountDays(pre_date);
            var n_date = now_date.split('/');
            n_date[1] = Number(n_date[1]) + 1;
            if (n_date[1] > 12) {
                n_date[0] = Number(n_date[0]) + 1;
                n_date[1] = 1;
            }
            if (n_date[1] < 10) {
                n_date[1] = '0' + n_date[1]
            }
            n_date = n_date[0] + '/' + n_date[1] + '/' + n_date[2];
            var n_week_no = new Date(n_date).getDay();
            var n_date_size = getCountDays(n_date);
            var data = {}; //回调返回数据
            data.now_date = now_date;
            data.week_no = week_no;
            data.date_size = date_size;
            data.my_date = my_date;
            data.pre_date = pre_date;
            data.pre_week_no = pre_week_no;
            data.n_week_no = n_week_no;
            data.n_date_size = n_date_size;
            for (i = 0; i < date_size; i++) {
                td[(week_no + i)].innerHTML = (i + 1);
            }
            for (i = 0; i < week_no; i++) {
                td[i].innerHTML = (pre_date_size - week_no + i + 1);
                td[i].style.color = '#cccccc';
            }
            for (i = week_no + date_size, j = 1; i < 42; i++, j++) {
                td[i].innerHTML = j;
                td[i].style.color = '#cccccc';
            }
            function getCountDays(e) { //获取当前日期所在的月有多少天
                var curDate = new Date(e);
                var curMonth = curDate.getMonth();
                curDate.setMonth(curMonth + 1);
                curDate.setDate(0);
                return curDate.getDate();
            }

            function GetDateStr(AddDayCount) {
                var dd = new Date();
                dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
                var y = dd.getFullYear();
                var m = dd.getMonth() + 1; //获取当前月份的日期
                var d = dd.getDate();
                return y + "/" + m + "/" + d;
            }
        }
        calendar('2017/03/01', 'my_date');
    </script>
</body>
</html>